<!-- 资产详情 -->
<template>
    <div class="page assetsDetail-page" data-page="assetsDetail" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">资产详情</div>
        </div>
        <div class="page-content" style="padding-bottom: 20px;">
            <div id="assetsDetai_pic_{{getNewId}}" style="margin: 20px;"></div>
            <div class="trouble-left-title zichangleft" id="assetInfo-item-status_{{getNewId}}"></div>
            <div class="trouble-left-title item-name zichangleft" id="assetInfo-item-name_{{getNewId}}"></div>
            <div class="trouble-left-title item-location zichangleft" id="assetInfo-item-location_{{getNewId}}"></div>
            <div class="over-line"></div>
            <div class="form-hiddenDanger" id="task_now_block_{{getNewId}}">
                <div class="rdsp-inner-content">
                    <div class="hiddenDanger-block trouble-item">
                        <div class="trouble-basic-title">当前维保任务</div>
                    </div>
                </div>
                <div class="rdsp-inner-content" id="task_item_xc_{{getNewId}}">
                    <div class="hiddenDanger-block trouble-item">
                        <div class="  fl info-left-title"><img src="{{ staticPath }}img/icon_task_xc.png" class="wbIcon">维保巡查</div>
                        <div class="  has-arrow">
                            <a href="#" class="toWork" @click="gotoMaintainInspectDetail()">去完成</a>
                        </div>
                    </div>
                </div>
                <div class="rdsp-inner-content" id="task_item_by_{{getNewId}}">
                    <div class="hiddenDanger-block trouble-item">
                        <div class="fl info-left-title"><img src="{{ staticPath }}img/icon_task_by.png" class="wbIcon">保养</div>
                        <div class="has-arrow">
                            <a href="#" class="toWork" @click="gotoMaintainDetail()">去完成</a>
                        </div>
                    </div>
                </div>
                <div class="rdsp-inner-content" id="task_item_cs_{{getNewId}}">
                    <div class="hiddenDanger-block trouble-item">
                        <div class="fl info-left-title"><img src="{{ staticPath }}img/icon_task_cs.png" class="wbIcon">测试</div>
                        <div class="has-arrow">
                            <a href="#" class="toWork" @click="gotoSingleTaskDetail()">去完成</a>
                        </div>
                    </div>
                </div>
                <div class="over-line"></div>
            </div>
            
            <div class="form-hiddenDanger">
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class="trouble-basic-title">基本信息</div>
                        </div>
                    </div>
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class="fl info-left-title">标识类型</div>
                            <div class="has-arrow">
                                <div id="tb-cardType_{{getNewId}}" class="right-select right-datail right-content-basic"></div>
                            </div>
                        </div>
                    </div>
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class="fl info-left-title">二维码</div>
                            <div class="  has-arrow">
                                <div id="tb-rCode_{{getNewId}}" class="right-select right-datail right-content-basic" style="float: right;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class="fl info-left-title">业主单位</div>
                            <div class="  has-arrow">
                                <div id="tb-owner_{{getNewId}}" class="right-select right-datail right-content-basic"></div>
                            </div>
                        </div>
                    </div>
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class="fl info-left-title">维保公司</div>
                            <div class="  has-arrow">
                                <div id="tb-company_{{getNewId}}" class="right-select right-datail right-content-basic"></div>
                            </div>
                        </div>
                    </div>
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class=" fl info-left-title">编号</div>
                            <div class="has-arrow">
                                <div id="tb-No_{{getNewId}}" class="right-select right-datail right-content-basic"></div>
                            </div>
                        </div>
                    </div>
                      
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class=" fl info-left-title">型号</div>
                            <div class="has-arrow">
                                <div id="tb-typeNo_{{getNewId}}" class="right-select right-datail right-content-basic"></div>
                            </div>
                        </div>
                    </div>
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class=" fl info-left-title">品牌</div>
                            <div class="has-arrow">
                              <div id="tb-brand_{{getNewId}}" class="right-select right-datail right-content-basic"></div>
                            </div>
                        </div>
                    </div>
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class=" fl info-left-title">生产厂家</div>
                            <div class="has-arrow">
                                <div id="tb-createProducer_{{getNewId}}" class="right-select right-datail right-content-basic"></div>
                            </div>
                        </div>
                    </div>  
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class=" fl info-left-title">入库时间</div>
                            <div class="has-arrow">
                                <div id="tb-inTime_{{getNewId}}" class="right-select right-datail right-content-basic"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="over-line"></div>
                <div class="form-hiddenDanger">
                	<div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class="trouble-basic-title">室内定位</div>
                        </div>
                    </div>
                    <div class="rdsp-inner-content">
                        <a id="fmapHerf" class="hiddenDanger-block trouble-item" style="display:block">
                            <div class="fl info-left-title">查看室内定位</div>
                            <div class="has-arrow">
                                <i class="icon iconfont icon-jiantou arrowIcon"></i>
                            </div>
                        </a>
                    </div>
                </div> -->
                <div class="over-line"></div>
                <div class="form-hiddenDanger" style="height:350px">
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class="trouble-basic-title">维保计划</div>
                        </div>
                    </div>
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class="  fl info-left-title">维保巡查</div>
                            <div class="  has-arrow">
                                <div id="tb-wbTimes_{{getNewId}}" class="right-select right-datail right-content-basic"></div>
                            </div>
                        </div>
                    </div>
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class="fl info-left-title">保养</div>
                            <div class="  has-arrow">
                                <div id="tb-byTimes_{{getNewId}}" class="right-select right-datail right-content-basic"></div>
                            </div>
                        </div>
                    </div>
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block trouble-item">
                            <div class="fl info-left-title">测试</div>
                            <div class="  has-arrow">
                                <div id="tb-csTimes_{{getNewId}}" class="right-select right-datail right-content-basic"></div>
                            </div>
                        </div>
                    </div>
                    <div class="rdsp-inner-content">
                        <a href="#" class="wbRecord wbRecord_self" id="wbRecord_{{getNewId}}" @click="gotoMaintain">查看维保记录</a>
                    </div>
                </div>
                <div class="popup dector-popup" id="QrBox" style="height:254px !important;top:20%!important;width: 240px;left: 50%;border-bottom-left-radius: 15px;transform: translate(-50%);
                    border-bottom-right-radius: 15px;z-index: 20000;position: fixed;">
                    <div class="rdsp-dector-popup">
                        <div class="rdsp-dector-popup-bottom">
                            <span class="bind-all-unit" style="font-size:18px; text-align:center;display:block">二维码</span>
                            <div id="letter_{{getNewId}}" style="width: 174px;height: 174px;margin: auto;"></div>
                        </div>
                    </div>
                    <div id="closepupop" style="color:#2471CA;text-align: center;border-bottom: 1px solid #2471CA;position: absolute;z-index: 20000;top: 103%;left: 44%;">关闭</div> 
                </div>
                <div class="back-popup-backdrop"></div>
        </div>
        <!-- 二维码 -->
        <img id="img-buffer" style="border: 10px solid red; width: 25px; height: 25px;display: none;" src="{{staticPath}}img/logo/favicon.png">
  </div>
</template>
<script>
    return {
        mounted() {
            var self = this;
            var app = self.$app;
            //页面传参
            self.assetsId = this.$route.params.assetsId;
            self.visualCode = this.$route.params.visualCode;
        },
        data: function () {
            return {
              assetsId: 0,
              visualCode:'',
              maintainId:0,
              maintainStatus:0,
              testId:0,
              testStatus:0,
              inspectId:0,
              inspectStatus:0,
              assetsType:1,//1.单点，2.区域
              getNewId: (new Date()).getTime()
            }
        },
        methods: {
            gotoMaintain:function(){
                var self = this;
                app.router.navigate("/maintainRecord/"+self.assetsId+'/'+self.assetsType+'/');
            },
            gotoMaintainDetail(){
            	var self = this;
            	app.router.navigate("/maintainDetail/"+self.maintainId+"/0/");
            },
            gotoMaintainInspectDetail(){
            	var self = this;
            	app.router.navigate("/maintainInspectDetail/"+self.inspectId+"/0/");
            },
            gotoSingleTaskDetail(){
            	var self = this;
            	app.router.navigate("/singleTestDetail/"+self.testId+"/0/");
            },
            getAInfo:function(){
                var self = this;
                common.loading(1);
                Dao.getAInfo({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    id:self.assetsId,
                    visualCode:"",
                },function(data){
                    common.loading(0);
                    var image = "";
                    //资产图片
                    $("#assetsDetai_pic_"+self.getNewId).empty();
                    if (data.picturesUrls!=null&&data.picturesUrls!=''){
                        image = data.picturesUrls.split(',');
                        $("#assetsDetai_pic_"+self.getNewId).html(`<img  src="`+ image[0]+`" class="wt90">`);
                        jQuery("#assetsDetai_pic_"+self.getNewId).off('click').on('click',{'data':image},function(e) {
                            openAndShowBigImage(e.data.data,0)
                        });
                    }else{
                        //没图片的时候
                        //初始化上传
                        upLoadImagesCompt(jQuery("#assetsDetai_pic_"+self.getNewId),function(pic,isAdd){
                            $("#assetsDetai_pic_"+self.getNewId).empty();
                            if(isAdd == "add"){
                                Dao.updateAInfo({ 
                                    id: self.assetsId, 
                                    picturesUrls: pic
                                },function(data){
                                    app.view.current.router.refreshPage();
                                });
                            }
                        },true,null,'assetsDetai_pic_container_' + self.getNewId,'assetsDetai_pic_pick_' + self.getNewId,'添加资产图片');
                    }
                    var statusHtml='';
                    if(data.isUse==0){
                        statusHtml+='<span>在用</span>';
                    }else{
                        statusHtml+='<span>停用</span>';
                    }
                    var codeType=data.visualCodeType;//0：单点自动 1：单点手动 2:区域
                    var codeTypeStr="";
                    if(codeType==0){
                    	codeTypeStr='单点自动';
                	}else if(codeType==1){
                		codeTypeStr='单点手动';
                	}else{
                		codeTypeStr='区域';
                		self.assetsType=2;
                	}
                    statusHtml+='<span>'+data.categoryName+'</span>';
                    $("#assetInfo-item-status_"+self.getNewId).append(statusHtml);
                    $("#assetInfo-item-name_"+self.getNewId).empty().html(common.transNullundefinedToline(data.name));
                    $("#assetInfo-item-location_"+self.getNewId).empty().html(common.transNullundefinedToline(data.location)); 
                    $("#tb-cardType_"+self.getNewId).empty().html(common.transNullundefinedToline(codeTypeStr));
                    //生成二维码
                    updateCode($("#tb-rCode_"+self.getNewId),data.visualCode,30);
                    
                    
                    // $("#tb-rCode").empty().html(common.transNullundefinedToline(data.visualCode));
                    $("#tb-owner_"+self.getNewId).empty().html(common.transNullundefinedToline(data.orginazitionName));
                    $("#tb-company_"+self.getNewId).empty().html(common.transNullundefinedToline(data.maintenanceCompanyName));
                    $("#tb-No_"+self.getNewId).empty().html(common.transNullundefinedToline(data.serialNumber));
                    $("#tb-typeNo_"+self.getNewId).empty().html(common.transNullundefinedToline(data.model));
                    $("#tb-brand_"+self.getNewId).empty().html(common.transNullundefinedToline(data.brand));
                    $("#tb-createProducer_"+self.getNewId).empty().html(common.transNullundefinedToline(data.producerName));
                    $("#tb-inTime_"+self.getNewId).empty().html(moment(data.createTime).format("YYYY-MM-DD HH:mm:ss")); 
                    //室内定位
                    //$("#fmapHerf").attr("href","/assetsFmap/"+self.assetsId+"/");
                    // 二维码放大
                    $('#tb-rCode_'+self.getNewId).off('click').click(function(){
                        $("#closepupop").show()
                        let html5 = $('#QrBox');
                        $('.back-popup-backdrop').show()
                        updateCode($("#letter_"+self.getNewId),data.visualCode,174);
                        $('#QrBox').show()
                    })
                    jQuery('#closepupop').click(function () {
                        $('.back-popup-backdrop').hide()
                        $("#closepupop").hide()
                        $('#QrBox').hide()
                    })
                    $('.back-popup-backdrop').on('click',function(){
                        $('.back-popup-backdrop').hide()
                        $("#closepupop").hide()
                        $('#QrBox').hide()
                    })
                });
            },
            getTaskInfo:function(){
            	var self=this;
            	Dao.getTaskPlanInfo({
            		userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    assetsId:self.assetsId,
            	},function(data){
            		var inspectPlanStr="";//巡查类型;0：表示无计划，1：月 2：季度 3：半年 4：1年’
            		var maintainPlanStr="";//保养类型：0：表示无计划，1：月 2：季度 3：半年 4：1年’
            		var testPlanStr="";//测试类型;0：表示无计划，1：月 2：季度 3：半年 4：1年’
            		switch(data.inspectPlan){
            			case 0:inspectPlanStr="无计划";break;
            			case 1:inspectPlanStr="月";break;
            			case 2:inspectPlanStr="季度";break;
            			case 3:inspectPlanStr="半年";break;
            			case 4:inspectPlanStr="年度";break;
            		}
            		switch(data.maintainPlan){
            			case 0:maintainPlanStr="无计划";break;
            			case 1:maintainPlanStr="月";break;
            			case 2:maintainPlanStr="季度";break;
            			case 3:maintainPlanStr="半年";break;
            			case 4:maintainPlanStr="年度";break;
            		}
            		switch(data.testPlan){
            			case 0:testPlanStr="无计划";break;
            			case 1:testPlanStr="月";break;
            			case 2:testPlanStr="季度";break;
            			case 3:testPlanStr="半年";break;
            			case 4:testPlanStr="年度";break;
            		}
            		$("#tb-wbTimes_"+self.getNewId).empty().html(common.transNullundefinedToline(inspectPlanStr)); 
                    $("#tb-byTimes_"+self.getNewId).empty().html(common.transNullundefinedToline(maintainPlanStr)); 
                    $("#tb-csTimes_"+self.getNewId).empty().html(common.transNullundefinedToline(testPlanStr));
            	});
            },
            getTaskNowInfo:function(){
            	var self=this;
            	Dao.getTaskNowInfo({
            		userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    assetsId:self.assetsId,
            	},function(data){
            		$("#task_now_block_"+self.getNewId).hide();
            		if(data.inspect!="0" || data.maintain!="0" || data.test!="0"){
            			$("#task_now_block_"+self.getNewId).show();
            			if(data.inspect=="0"){
            				$("#task_item_xc_"+self.getNewId).hide();
            			}else{
            				$("#task_item_xc_"+self.getNewId).show();
            				self.inspectId=data.inspectId;
    	            		self.inspectStatus=data.inspectStatus;
            			}
            			if(data.maintain=="0"){
            				$("#task_item_by_"+self.getNewId).hide()
            			}else{
            				$("#task_item_by_"+self.getNewId).show();
            				self.maintainId=data.maintainId;
    	            		self.maintainStatus=data.maintainStatus;
            			}
            			if(data.test=="0"){
            				$("#task_item_cs_"+self.getNewId).hide();
            			}else{
            				$("#task_item_cs_"+self.getNewId).show();
            				self.testId=data.testId;
    	            		self.testStatus=data.testStatus;
            			}
	            		
            		}
            	});
            },
        },
        on: {
            pageInit: function (e, page) {
                $('.back-popup-backdrop').hide()
                this.getAInfo();
                this.getTaskInfo();
                this.getTaskNowInfo();
            },
        }
    }
</script>
<style scoped>
.zichangleft{
    margin-left: 20px;
}
.wbRecord_self {
    margin: 42px 5% 0 5%;
    height: 44px;
    background: rgba(36, 113, 202, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 44px;
    display: block;
    text-align: center;
}
.back-popup-backdrop{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    /* z-index: 13000;
    visibility: hidden;
    opacity: 0; */
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    z-index: 10500;
    visibility: visible;
    opacity: 1;
}
</style>